<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="问题风险改造" data-page-identification="f_xvfhy975y3">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_vbondwkzbp 自定义模板_4kfr68yg2g -->
            <!--          转换为工单-->
            <a-modal
                centered
                v-model:visible="gdState.visible"
                title="转化为工单"
                @ok="submit"
                @cancel="fatherCancel"
                width="1000px"
                destroy-on-close
                :ok-button-props="{ loading: gdState.fatherLoading }"
            >
                <div class="gd-form-content">
                    <a-form :model="gdState.modalForm" ref="gdFormRef">
                        <a-row>
                            <a-col :span="24">
                                <a-form-item
                                    label="工单标题"
                                    :rules="[{ required: true, message: '请输入工单标题', trigger: 'blur' }]"
                                    name="content"
                                >
                                    <a-textarea
                                        maxlength="100"
                                        show-count
                                        placeholder="请输入"
                                        v-model:value="gdState.modalForm.content"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item
                                    label="工单类型"
                                    :rules="[{ required: true, message: '请选择工单类型', trigger: 'blur' }]"
                                    name="type"
                                >
                                    <a-select
                                        :options="[
                                            {
                                                label: '问题转化',
                                                value: '问题转化'
                                            },
                                            {
                                                label: '产品问题',
                                                value: '产品问题'
                                            },
                                            {
                                                label: '数据问题',
                                                value: '数据问题'
                                            },
                                            {
                                                label: '算法问题',
                                                value: '算法问题'
                                            },
                                            {
                                                label: '系统故障',
                                                value: '系统故障'
                                            },
                                            {
                                                label: '产品需求',
                                                value: '产品需求'
                                            },
                                            {
                                                label: '算法需求',
                                                value: '算法需求'
                                            }
                                        ]"
                                        v-model:value="gdState.modalForm.type"
                                        placeholder="请选择"
                                        @change="gdState.modalForm.monitorScene = undefined"
                                    />
                                    <!--                                  @change="hanldeTypeChange"-->
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="监控场景">
                                    <a-select
                                        @focus="getMonitorSceneList(false)"
                                        show-search
                                        :options="gdState.monitorSceneList"
                                        v-model:value="gdState.modalForm.monitorScene"
                                        placeholder="请选择"
                                        :field-names="{ label: 'label', value: 'value' }"
                                        :filterOption="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item
                                    label="优先级"
                                    :rules="[{ required: true, message: '请选择优先级', trigger: 'blur' }]"
                                    name="priority"
                                >
                                    <a-select
                                        :disabled="gdState.modalForm.type === '产品需求'"
                                        v-model:value="gdState.modalForm.priority"
                                        :options="[
                                            {
                                                label: 'p0',
                                                value: 'p0'
                                            },
                                            {
                                                label: 'p1',
                                                value: 'p1'
                                            },
                                            {
                                                label: 'p2',
                                                value: 'p2'
                                            },
                                            {
                                                label: 'p3',
                                                value: 'p3'
                                            }
                                        ]"
                                        placeholder="请选择"
                                    />
                                    <!--                                  @change="getSolveTimeByType"-->
                                </a-form-item>
                            </a-col>
                            <a-col :span="12" v-if="gdState.modalForm.type !== '产品需求'">
                                <a-form-item
                                    label="计划解决时长(小时)"
                                    :rules="[
                                        {
                                            pattern: new RegExp(/^(0(\.5)?|[1-9](\d*)?(\.5)?(\.0)?)$/),
                                            message: '请输入大于0的数字(支持0.5的倍数)',
                                            trigger: 'blur'
                                        }
                                    ]"
                                    name="workHours"
                                >
                                    <a-input-number
                                        placeholder="请输入"
                                        v-model:value="gdState.modalForm.workHours"
                                        @change="getSolveTime"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item
                                    label="计划解决时间"
                                    :rules="[{ required: true, message: '请选择计划解决时间', trigger: 'blur' }]"
                                    name="endTime"
                                >
                                    <a-date-picker
                                        show-time
                                        placeholder="请选择"
                                        v-model:value="gdState.modalForm.endTime"
                                        value-format="YYYY-MM-DD HH:mm:ss"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item
                                    label="问题来源"
                                    :rules="[{ required: true, message: '请选择问题来源', trigger: 'blur' }]"
                                    name="questionSource"
                                >
                                    <a-select
                                        disabled
                                        v-model:value="gdState.modalForm.questionSource"
                                        placeholder="请选择"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item
                                    label="所属区域"
                                    :rules="[{ required: true, message: '请选择所属区域', trigger: 'blur' }]"
                                    name="areaCode"
                                >
                                    <a-select
                                        allow-clear
                                        show-search
                                        :options="gdState.areaList"
                                        placeholder="请选择"
                                        v-model:value="gdState.modalForm.areaCode"
                                        @focus="getGdAreaList"
                                        :field-names="{ label: 'label', value: 'value' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                        @change="gdAreaChange"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item
                                    label="所属客户"
                                    :rules="[{ required: false, message: '请输入所属客户', trigger: 'blur' }]"
                                    name="customer"
                                >
                                    <a-select
                                        allow-clear
                                        show-search
                                        :options="gdState.customList"
                                        placeholder="请选择"
                                        v-model:value="gdState.modalForm.customer"
                                        @focus="getCustomerList"
                                        :field-names="{ label: 'name', value: 'name' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                        @change="customerChange"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item
                                    label="所属项目"
                                    :rules="[{ required: true, message: '请选择所属项目', trigger: 'blur' }]"
                                    name="projectId"
                                >
                                    <a-select
                                        allow-clear
                                        show-search
                                        :options="gdState.projectList"
                                        placeholder="请选择"
                                        v-model:value="gdState.modalForm.projectId"
                                        :field-names="{ label: 'projectName', value: 'projectId' }"
                                        :filter-option="
                                            (input, option) => {
                                                return (
                                                    option.projectName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                )
                                            }
                                        "
                                        @focus="getProjectList"
                                        @change="projectChange"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item
                                    label="环境"
                                    :rules="[{ required: false, message: '请选择环境', trigger: 'blur' }]"
                                    name="environment"
                                >
                                    <a-select
                                        show-search
                                        allow-clear
                                        :options="gdState.environmentList"
                                        placeholder="请选择"
                                        v-model:value="gdState.modalForm.environment"
                                        :field-names="{ label: 'name', value: 'name' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                        @focus="getEnvironmentList"
                                        @change="environmentChange"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item
                                    label="所属产品"
                                    :rules="[{ required: false, message: '请选择所属产品', trigger: 'blur' }]"
                                    name="production"
                                >
                                    <a-select
                                        show-search
                                        allow-clear
                                        :options="gdState.productList"
                                        placeholder="请选择"
                                        v-model:value="gdState.modalForm.production"
                                        @change="productChange"
                                        @focus="getProductList"
                                        :field-names="{ label: 'name', value: 'name' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="版本">
                                    <a-input v-model:value="gdState.modalForm.version" disabled />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <div class="description-tip" v-if="currentData.status !== '未开始' && currentData.status"
                            ><ExclamationCircleFilled class="tip-img" /> 解决中的工单不支持编辑问题描述</div
                        >
                        <a-row
                            :style="{
                                pointerEvents:
                                    currentData.status === '未开始' ||
                                    !currentData.status ||
                                    currentData.status === '待分发'
                                        ? 'auto'
                                        : 'none'
                            }"
                        >
                            <a-col :span="24">
                                <a-form-item
                                    label="问题&风险描述"
                                    :rules="[{ required: true, message: '请输入问题&风险描述', trigger: 'blur' }]"
                                    name="qillData"
                                >
                                    <QuillEditor
                                        v-model:content="gdState.modalForm.qillData"
                                        ref="quillEditor"
                                        :options="editorOption"
                                        class="quill-editor"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="24">
                                <a-form-item
                                    label="解决人"
                                    :rules="[{ required: true, message: '请选择解决人', trigger: 'blur' }]"
                                    name="solverList"
                                >
                                    <a-select
                                        class="remove-icon"
                                        show-search
                                        mode="multiple"
                                        :options="gdState.allUser"
                                        v-model:value="gdState.modalForm.solverList"
                                        placeholder="请选择"
                                        :field-names="{ label: 'name', value: 'name' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                        @change="fatherSolverChange"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <!--                      <a-col v-if="taskPeopleList.length > 0">-->
                        <a-col>
                            <div style="width: 700px; margin-left: 135px; margin-bottom: 16px">
                                <a
                                    href="javascript:;"
                                    v-for="(item, num) in taskPeopleList"
                                    @click="handlerAddPeople(item.value, index)"
                                    ><span style="margin: 0 5px">{{ item.value }}</span></a
                                >
                            </div>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="上传附件">
                                <a-upload
                                    v-model:file-list="gdState.modalForm.descriptionAttachmentList"
                                    :multiple="true"
                                    :before-upload="handlerFatherUpload"
                                    @remove="handlerFatherRemove"
                                    accept=".xlsx, image/*,.docx,, .xls,.mp4"
                                >
                                    <a-button type="primary">
                                        <upload-outlined />
                                        上传
                                    </a-button>
                                </a-upload>
                                <span>支持格式：.xlsx, image/*,.docx,, .xls,.mp4</span>
                            </a-form-item>
                        </a-col>
                    </a-form>
                </div>
            </a-modal>
            <!--          转换为工单-->
            <div class="body">
                <div class="main">
                    <div class="kb-table-box">
                        <div style="display: flex; justify-content: end; margin-bottom: 16px">
                            <a-button type="primary" @click="handleAddTable">新建</a-button></div
                        >
                        <a-table
                            :columns="columnState.baseColumns"
                            :dataSource="state.selectData.projectProgressQuestionList"
                            :scroll="{ y: 550 }"
                            :pagination="false"
                            :loading="state.tableLoading"
                            bordered
                            @resizeColumn="handleResizeColumn"
                            :showSorterTooltip="false"
                            ref="tableRef"
                            @change="handleTableChange"
                        >
                            <template #bodyCell="{ record, text, column, index }">
                                <template v-if="column.dataIndex == 'opration'">
                                    <a-space>
                                        <a-button
                                            size="small"
                                            type="link"
                                            @click="showGd(record)"
                                            :disabled="
                                                record.projectType === '平台项目' ||
                                                record.workOrderNumber ||
                                                !record.id
                                            "
                                            >转工单</a-button
                                        >
                                        <a-button
                                            size="small"
                                            type="link"
                                            v-if="record.isEdit"
                                            @click="confirmLhwt(record)"
                                            :loading="record.okBtnLoading"
                                            >完成</a-button
                                        >
                                        <a-button
                                            size="small"
                                            type="link"
                                            :disabled="!record.id"
                                            :loading="record.editLoading"
                                            v-else
                                            @click="handleEdit(record)"
                                            >编辑</a-button
                                        >
                                        <a-popconfirm
                                            title="确定删除吗?"
                                            @confirm="confirmDeleteLhwt(record, record.id)"
                                        >
                                            <a-button size="small" type="link">删除</a-button>
                                        </a-popconfirm>
                                    </a-space>
                                </template>
                                <!-- 编辑状态下，展示输入框或选择框 -->
                                <template v-if="record.isEdit">
                                    <!--                                记录日期-->
                                    <template v-if="column.dataIndex === 'meetingDate'">
                                        <!--                                        <div class="validate-content">-->
                                        <a-date-picker
                                            :valueFormat="'YYYY-MM-DD'"
                                            style="width: 100%; padding-left: 12px"
                                            v-model:value="record.meetingDate"
                                            placeholder="选择日期"
                                        />
                                        <!--                                            <div class="validate-icon"></div>-->
                                        <!--                                        </div>-->
                                    </template>
                                    <!--                                记录日期-->
                                    <!--                                会议类型-->
                                    <template v-if="column.dataIndex === 'meetingSources'">
                                        <a-select
                                            style="width: 100%"
                                            allow-clear
                                            mode="multiple"
                                            show-search
                                            v-model:value="record.meetingSourceList"
                                            :options="state.hylyList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'itemName', value: 'itemName' }"
                                            :getPopupContainer="getPopupContainer"
                                        />
                                    </template>
                                    <!--                                会议类型-->
                                    <!--                                产品线-->
                                    <template v-if="column.dataIndex === 'productLine'">
                                        <a-select
                                            style="width: 100%"
                                            allow-clear
                                            mode="multiple"
                                            show-search
                                            :field-names="{ label: 'label', value: 'value' }"
                                            v-model:value="record.productLineList"
                                            :options="state.productLineList"
                                            placeholder="请选择"
                                            :getPopupContainer="getPopupContainer"
                                        />
                                    </template>
                                    <!--                                产品线-->
                                    <!--                                项目总监-->
                                    <template v-if="column.dataIndex === 'projectDirector'">
                                        <a-select
                                            :disabled="record.projectType === '平台项目'"
                                            allow-clear
                                            show-search
                                            style="width: 100%"
                                            v-model:value="record.projectDirector"
                                            :options="state.allUser"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filterOption="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                            :max-tag-count="2"
                                            :getPopupContainer="getPopupContainer"
                                        />
                                    </template>
                                    <!--                                项目总监-->
                                    <!--                                pmo-->
                                    <template v-if="column.dataIndex === 'pmo'">
                                        <a-select
                                            :disabled="record.projectType === '平台项目'"
                                            allow-clear
                                            show-search
                                            style="width: 100%"
                                            v-model:value="record.pmo"
                                            :options="state.allUser"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filterOption="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                            :max-tag-count="2"
                                            :getPopupContainer="getPopupContainer"
                                        />
                                    </template>
                                    <!--                                pmo-->
                                    <!--                                项目经理-->
                                    <template v-if="column.dataIndex === 'pmName'">
                                        <a-select
                                            :disabled="record.projectType === '平台项目'"
                                            allow-clear
                                            show-search
                                            style="width: 100%"
                                            v-model:value="record.pmName"
                                            :options="state.allUser"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filterOption="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                            :max-tag-count="2"
                                            :getPopupContainer="getPopupContainer"
                                        />
                                    </template>
                                    <!--                                项目经理-->
                                    <!--                                问题&风险描述-->
                                    <template v-if="column.dataIndex === 'questionDescription'">
                                        <!--                                        <div class="validate-content">-->
                                        <a-textarea
                                            v-model:value="record.questionDescription"
                                            placeholder="请输入问题&风险描述"
                                            :rows="1"
                                        />
                                        <!--                                            <div class="validate-icon"></div>-->
                                        <!--                                        </div>-->
                                    </template>
                                    <!--                                问题&风险描述-->
                                    <!--                                项目进展状态-->
                                    <template v-if="column.dataIndex === 'projectProgressStatus'">
                                        <!--                                        <div class="validate-content">-->
                                        <!--                                            <a-textarea-->
                                        <!--                                                v-model:value="record.projectProgressStatus"-->
                                        <!--                                                placeholder="请输入项目进展状态"-->
                                        <!--                                                :rows="1"-->
                                        <!--                                            />-->
                                        <!--                                            <div class="validate-icon"></div>-->
                                        <!--                                        </div>-->
                                        <a-textarea
                                            v-model:value="record.projectProgressStatus"
                                            placeholder="请输入项目进展状态"
                                            :rows="1"
                                        />
                                    </template>
                                    <!--                                项目进展状态-->
                                    <!--                                风险类型-->
                                    <template v-if="column.dataIndex === 'riskType'">
                                        <!--                                        <div class="validate-content">-->
                                        <a-select
                                            allow-clear
                                            show-search
                                            style="width: 100%"
                                            v-model:value="record.riskType"
                                            :options="state.fxlxList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'itemName', value: 'itemName' }"
                                            :filterOption="
                                                (input, option) => {
                                                    return (
                                                        option.itemName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                    )
                                                }
                                            "
                                        />
                                        <!--                                            <div class="validate-icon"></div>-->
                                        <!--                                        </div>-->
                                    </template>
                                    <!--                                风险类型-->
                                    <!--                                解决方案及行动项-->
                                    <template v-if="column.dataIndex === 'solutionOrAction'">
                                        <a-textarea
                                            v-model:value="record.solutionOrAction"
                                            :rows="1"
                                            placeholder="请输入解决方案及行动项"
                                        />
                                    </template>
                                    <!--                                解决方案及行动项-->
                                    <!--                                计划解决日期-->
                                    <template v-if="column.dataIndex === 'endTime'">
                                        <a-date-picker
                                            :valueFormat="'YYYY-MM-DD'"
                                            style="width: 100%"
                                            v-model:value="record.endTime"
                                            placeholder="选择日期"
                                        />
                                    </template>
                                    <!--                                计划解决日期-->
                                    <!--                              完成情况反馈  -->
                                    <template v-if="column.dataIndex === 'completionStatusFeedback'">
                                        <a-textarea
                                            v-model:value="record.completionStatusFeedback"
                                            :rows="1"
                                            placeholder="请输入完成情况反馈"
                                        />
                                    </template>
                                    <!--                              完成情况反馈  -->
                                    <!--                              责任人  -->
                                    <template v-if="column.dataIndex === 'responsiblePerson'">
                                        <!--                                        <div class="validate-content">-->
                                        <a-select
                                            allow-clear
                                            show-search
                                            style="width: 100%"
                                            v-model:value="record.responsiblePersonList"
                                            :options="state.allUser"
                                            mode="multiple"
                                            :max-tag-count="1"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filterOption="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                            :getPopupContainer="getPopupContainer"
                                        />
                                        <!--                                            <div class="validate-icon"></div>-->
                                        <!--                                        </div>-->
                                    </template>
                                    <!--                              责任人  -->
                                    <!--                              问题类型  -->
                                    <template v-if="column.dataIndex === 'questionTypeFirst'">
                                        <a-tree-select
                                            v-model:value="record.questionTypeSecond"
                                            show-search
                                            treeDefaultExpandAll
                                            style="width: 100%"
                                            placeholder="请选择"
                                            allow-clear
                                            :tree-data="state.wtlxList"
                                            :fieldNames="{
                                                children: 'children',
                                                label: 'itemName',
                                                value: 'itemName',
                                                key: 'itemCode'
                                            }"
                                            :filterTreeNode="
                                                (inputValue, treeNode) => {
                                                    return (
                                                        treeNode.itemName
                                                            .toLowerCase()
                                                            .indexOf(inputValue.toLowerCase()) >= 0
                                                    )
                                                }
                                            "
                                            :max-tag-count="1"
                                        />
                                    </template>
                                    <!--                              问题类型  -->
                                    <!--                              项目类型  -->
                                    <!--                                    <template v-if="column.dataIndex === 'projectType'">-->
                                    <!--                                        &lt;!&ndash;                                        <div class="validate-content">&ndash;&gt;-->
                                    <!--                                        <a-select-->
                                    <!--                                            allow-clear-->
                                    <!--                                            style="width: 100%"-->
                                    <!--                                            show-search-->
                                    <!--                                            v-model:value="record.projectType"-->
                                    <!--                                            :options="[-->
                                    <!--                                                {-->
                                    <!--                                                    label: '交付项目',-->
                                    <!--                                                    value: '交付项目'-->
                                    <!--                                                },-->
                                    <!--                                                {-->
                                    <!--                                                    label: '平台项目',-->
                                    <!--                                                    value: '平台项目'-->
                                    <!--                                                }-->
                                    <!--                                            ]"-->
                                    <!--                                            placeholder="请选择"-->
                                    <!--                                            :field-names="{ label: 'label', value: 'value' }"-->
                                    <!--                                            :filterOption="-->
                                    <!--                                                (input, option) => {-->
                                    <!--                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0-->
                                    <!--                                                }-->
                                    <!--                                            "-->
                                    <!--                                            :max-tag-count="2"-->
                                    <!--                                            :getPopupContainer="getPopupContainer"-->
                                    <!--                                            @change="projectTypeChange(record)"-->
                                    <!--                                        />-->
                                    <!--                                        &lt;!&ndash;                                            <div class="validate-icon"></div>&ndash;&gt;-->
                                    <!--                                        &lt;!&ndash;                                        </div>&ndash;&gt;-->
                                    <!--                                    </template>-->
                                    <!--                              项目类型  -->

                                    <!--                              是否为共性问题  -->
                                    <template v-if="column.dataIndex === 'commonProblems'">
                                        <a-select
                                            allow-clear
                                            style="width: 100%"
                                            placeholder="请选择"
                                            :options="[
                                                {
                                                    label: '是',
                                                    value: '是'
                                                },
                                                {
                                                    label: '否',
                                                    value: '否'
                                                }
                                            ]"
                                            v-model:value="record.commonProblems"
                                            :getPopupContainer="getPopupContainer"
                                        />
                                    </template>
                                    <!--                              是否为共性问题  -->
                                    <!--                              体系闭环  -->
                                    <template v-if="column.dataIndex === 'systemClosedLoop'">
                                        <a-select
                                            show-search
                                            style="width: 100%"
                                            allow-clear
                                            placeholder="请选择"
                                            :options="state.txbhList"
                                            v-model:value="record.systemClosedLoop"
                                            :getPopupContainer="getPopupContainer"
                                        />
                                    </template>
                                    <!--                              体系闭环  -->
                                    <!--                              解决方案  -->
                                    <template v-if="column.dataIndex === 'solution'">
                                        <a-select
                                            style="width: 100%"
                                            allow-clear
                                            show-search
                                            placeholder="请选择"
                                            :options="state.jjfaList"
                                            v-model:value="record.solution"
                                            :getPopupContainer="getPopupContainer"
                                        />
                                    </template>
                                    <!--                              解决方案  -->
                                </template>
                                <!-- 非编辑状态下，展示原始文本 -->
                                <template v-else>
                                    <template v-if="['工厂名称'].includes(column.title)">
                                        <div class="db-click-name" :title="text">{{ text }}</div>
                                    </template>
                                    <template v-if="['区域', '日期', '项目总监', '项目经理'].includes(column.title)">
                                        <div class="db-click">{{ text }}</div>
                                    </template>
                                    <template v-if="column.dataIndex === 'solutionOrAction'">
                                        <div class="progress-click">
                                            <a-tooltip
                                                :overlay-style="overStyle"
                                                v-if="record.solutionOrAction"
                                                placement="right"
                                            >
                                                <template #title>
                                                    <p
                                                        v-for="(item, index) in handlerGetSpace(
                                                            record.solutionOrAction
                                                        )"
                                                        :key="index"
                                                        style="margin: 0"
                                                        >{{ item }}</p
                                                    > </template
                                                ><div class="omit-div">{{ text }} </div>
                                            </a-tooltip>
                                        </div>
                                    </template>
                                    <template v-if="column.dataIndex === 'questionDescription'">
                                        <div class="question-div">
                                            <a-tooltip
                                                :overlay-style="overStyle"
                                                v-if="record.questionDescription"
                                                placement="right"
                                            >
                                                <template #title>
                                                    <p
                                                        v-for="(item, index) in handlerGetSpace(
                                                            record.questionDescription
                                                        )"
                                                        :key="index"
                                                        style="margin: 0"
                                                        >{{ item }}</p
                                                    > </template
                                                ><div class="omit-div-question"
                                                    ><span v-if="record.questionDescription">{{ text }}</span></div
                                                >
                                            </a-tooltip>
                                        </div>
                                    </template>
                                    <template v-if="column.dataIndex === 'projectProgressStatus'">
                                        <div class="question-div">
                                            <a-tooltip
                                                :overlay-style="overStyle"
                                                v-if="record.projectProgressStatus"
                                                placement="right"
                                            >
                                                <template #title>
                                                    <p
                                                        v-for="(item, index) in handlerGetSpace(
                                                            record.projectProgressStatus
                                                        )"
                                                        :key="index"
                                                        style="margin: 0"
                                                        >{{ item }}</p
                                                    > </template
                                                ><div class="omit-div-status"
                                                    ><span v-if="record.projectProgressStatus">{{ text }}</span></div
                                                >
                                            </a-tooltip>
                                        </div>
                                    </template>
                                    <template v-if="column.dataIndex === 'taskOrWorkOrder'">
                                        <a-tooltip :overlay-style="overStyle">
                                            <template #title>
                                                <template v-if="record.workOrderNumber">
                                                    <p
                                                        v-for="(item, index) in handlerGetSpace(record.workOrderNumber)"
                                                        :key="index"
                                                        style="margin: 0"
                                                        @click="jumpGd(record)"
                                                        >{{ item }}</p
                                                    >
                                                </template>
                                                <template v-else>{{ text }}</template>
                                            </template>
                                            <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
                                                ><a
                                                    v-if="record.workOrderNumber"
                                                    href="#"
                                                    @click="jumpGd(record)"
                                                    style="color: #3875ff; text-decoration: underline"
                                                    >{{ text }}</a
                                                >
                                                <span v-else>{{ text }}</span>
                                            </div>
                                        </a-tooltip>
                                    </template>
                                    <template v-if="column.dataIndex === 'completionStatusFeedback'">
                                        <div class="productionPlan-div">
                                            <a-tooltip
                                                :overlay-style="overStyle"
                                                v-if="record.completionStatusFeedback"
                                                placement="right"
                                            >
                                                <template #title>
                                                    <p
                                                        v-for="(item, index) in handlerGetSpace(text)"
                                                        :key="index"
                                                        style="margin: 0"
                                                        >{{ item }}</p
                                                    > </template
                                                ><div class="omit-div-productionPlan" v-if="text">{{ text }}</div>
                                            </a-tooltip>
                                        </div>
                                    </template>
                                </template>
                                <template v-if="column.dataIndex === 'count'">
                                    {{ index + 1 }}
                                </template>
                                <template v-if="column.dataIndex === 'responsiblePerson'">
                                    {{ record.responsiblePersonList?.join(',') }}
                                </template>
                                <!--                                转Faq状态-->
                                <template v-if="column.dataIndex === 'zfaq'">
                                    {{ record.faqMilepost ? '已转FAQ' : '未转FAQ' }}
                                </template>
                                <!--                                转Faq状态-->
                                <!--                                转工单状态-->
                                <template v-if="column.dataIndex === 'finishStatus'">
                                    <template
                                        v-if="record.isEdit && !record.workOrderNumber && !record.taskId && record.id"
                                    >
                                        <a-select
                                            style="width: 100%"
                                            v-model:value="record.finishStatus"
                                            :options="[
                                                {
                                                    label: '未开始',
                                                    value: '未开始'
                                                },
                                                {
                                                    label: '处理中',
                                                    value: '处理中'
                                                },
                                                {
                                                    label: '已完成',
                                                    value: '已完成'
                                                }
                                            ]"
                                        />
                                    </template>
                                    <template v-else
                                        ><div class="status-div" :style="{ backgroundColor: getTextColor(text) }"
                                            >{{ text }}
                                        </div>
                                    </template>
                                </template>
                                <!--                                转状态-->
                                <!--                                会议类型-->

                                <!--                                会议类型-->
                            </template>
                        </a-table>
                    </div>
                </div>
            </div>
            <!-- end vid_vbondwkzbp 自定义模板_4kfr68yg2g -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated,
        nextTick
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        },
        'id': {
            type: [String, Number],
            default: undefined
        },
        'from': {
            type: [String, Number],
            default: undefined
        },
        'projectId': {
            type: [String, Number],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    onMounted(() => {
        getHyly()
        getProductLineList()
        getLhwtAllUser()
        getFxLx()
        getBaseList()
    })
    const { id, from } = props
    const useId = ref(null)
    const useProjectId = ref(null)
    const useFrom = ref(null)
    import { watchEffect } from 'vue'
    import { QuillEditor } from '@vueup/vue-quill'
    watchEffect(() => {
        if (props.id) {
            setTimeout(() => {
                useId.value = props.id
                useFrom.value = props.from
                useProjectId.value = props.projectId
                getDataSource().then(() => {
                    let data = state.dataSource.find(item => item.projectId === useId.value)
                    if (data) {
                        state.selectData = data
                        // getFactory(state.selectData.areaCode || 0)
                    }
                })
            }, 500)
        }
    })
    const state = reactive({
        dataSource: [],
        selectData: {},
        tableLoading: false,
        hylyList: [],
        productLineList: [],
        allUser: [],
        fxlxList: [],
        wtlxList: [],
        faqList: [],
        txbhList: [],
        finishStatusList: [],
        projectList: []
    })
    // 转换FAQ
    function projectTypeChange(record) {
        if (record.projectType === '交付项目') {
            record.projectId = undefined
        } else if (record.projectType === '平台项目') {
            record.projectId = undefined
            record.areaCode = undefined
            record.projectDirector = undefined
            record.pmName = undefined
        }
        if (!record.projectType) {
            record.projectId = undefined
            record.areaCode = undefined
            record.projectDirector = undefined
            record.pmName = undefined
        }
    }
    async function getBaseList() {
        // 定义请求接口的 URL 或方法
        const requests = [
            get(' /solution-ppm-basic-data/api/v1/dictionary/search_tree/LHWTKB.WTLX'), // 问题类型
            get(' /solution-ppm-basic-data/api/v1/dictionary/search/LHWTKB.JJFA'), // 解决方案
            get(' /solution-ppm-basic-data/api/v1/dictionary/search/LHWTKB.FAQ'), // faq
            get(' /solution-ppm-basic-data/api/v1/dictionary/search/LHWTKB.TXBH'), // 体系闭环
            get(' /solution-ppm-basic-data/api/v1/dictionary/search/LHWTKB.GDZT') // 完成状态
        ]

        try {
            // 使用 Promise.allSettled 确保所有请求都会执行
            const results = await Promise.allSettled(requests)

            // 处理每个请求的结果
            results.forEach((result, index) => {
                if (result.status === 'fulfilled') {
                    if (index === 0) {
                        state.wtlxList = result.value.data
                    } else if (index === 1) {
                        state.jjfaList = result.value.data.map(item => {
                            return {
                                label: item.itemName,
                                value: item.itemName
                            }
                        })
                    } else if (index === 2) {
                        state.faqList = result.value.data.map(item => {
                            return {
                                label: item.itemName,
                                value: item.itemName
                            }
                        })
                    } else if (index === 3) {
                        state.txbhList = result.value.data.map(item => {
                            return {
                                label: item.itemName,
                                value: item.itemName
                            }
                        })
                    } else if (index === 4) {
                        state.finishStatusList = result.value.data.map(item => {
                            return {
                                label: item.itemName,
                                value: item.itemName
                            }
                        })
                    }
                } else {
                    // 请求失败，打印错误
                    console.error(`接口 ${index + 1} 请求失败:`, result.reason)
                }
            })
        } catch (error) {
            // 捕获任何其他的错误（比如请求数组外的错误）
            console.error('请求出现意外错误:', error)
        }
    }
    function getDataSource() {
        state.tableLoading = true
        return post('/solution-ppm/api/v2/built-in-system-ppm/project_progress/search', {
            customSort: { sortDirection: 'ASC', filed: 'AREA' },
            productLine: useFrom.value
        })
            .then(data => {
                state.dataSource = data.data
                return data.data
            })
            .finally(() => {
                state.tableLoading = false
            })
    }
    function getLhwtAllUser() {
        get('/solution-ppm/api/v2/built-in-system-ppm/pmgf/get/allUser').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.allUser = data.data.userDtoList
        })
    }
    // 获取风险类型
    function getFxLx() {
        get(' /solution-ppm-basic-data/api/v1/dictionary/search/FXLX').then(data => {
            state.fxlxList = data.data
        })
    }
    const currentLhwtData = ref({})
    const customCellStyle = () => {
        return {
            style: {
                padding: '0 5px'
            }
        }
    }
    const customOkCellStyle = () => {
        return {
            style: {
                padding: '4px 16px'
            }
        }
    }
    const columnState = reactive({
        baseColumns: [
            {
                title: '序号',
                dataIndex: 'count',
                align: 'center',
                width: 55,
                fixed: 'left',
                ellipsis: true
            },

            {
                title: '记录日期',
                dataIndex: 'meetingDate',
                align: 'center',
                width: 120,
                fixed: 'left',
                ellipsis: true,
                visible: true,
                customHeaderCell: customCellStyle
            },
            {
                title: '状态',
                dataIndex: 'finishStatus',
                align: 'center',
                ellipsis: true,
                width: 100,
                customHeaderCell: customOkCellStyle
            },
            {
                title: '工单编号',
                dataIndex: 'taskOrWorkOrder',
                align: 'center',
                ellipsis: true,
                width: 150
            },

            {
                title: '问题&风险描述',
                dataIndex: 'questionDescription',
                ellipsis: true,
                align: 'center',
                resizable: true,
                width: 350,
                minWidth: 350,
                visible: true,
                customHeaderCell: customCellStyle
            },
            {
                title: '解决方案及行动项',
                dataIndex: 'solutionOrAction',
                ellipsis: true,
                align: 'center',
                resizable: true,
                width: 350,
                minWidth: 350,
                visible: true,
                customHeaderCell: customCellStyle
            },
            {
                title: '责任人',
                dataIndex: 'responsiblePerson',
                align: 'center',
                ellipsis: true,
                visible: true,
                width: 150,
                customHeaderCell: customOkCellStyle
            },
            {
                title: '计划完成日期',
                dataIndex: 'endTime',
                align: 'center',
                ellipsis: true,
                width: 150,
                visible: true,
                customHeaderCell: customOkCellStyle
            },
            {
                title: '完成情况反馈',
                dataIndex: 'completionStatusFeedback',
                ellipsis: true,
                align: 'center',
                resizable: true,
                width: 350,
                minWidth: 350,
                visible: true,
                customHeaderCell: customCellStyle
            },
            {
                title: '风险类型',
                dataIndex: 'riskType',
                align: 'center',
                width: 150,
                ellipsis: true,
                visible: true,
                customHeaderCell: customCellStyle
            },
            {
                title: '会议类型',
                dataIndex: 'meetingSources',
                align: 'center',
                ellipsis: true,
                width: 120
            },
            {
                title: '产品线',
                dataIndex: 'productLine',
                align: 'center',
                ellipsis: true,
                width: 120
            },
            {
                title: '问题来源',
                dataIndex: 'questionSource',
                align: 'center',
                ellipsis: true,
                width: 120
            },
            {
                title: '项目类型',
                dataIndex: 'projectType',
                align: 'center',
                width: 150,
                ellipsis: true,
                visible: true,
                customHeaderCell: customCellStyle
            },

            {
                title: '项目总监',
                dataIndex: 'projectDirector',
                ellipsis: true,
                align: 'center',
                visible: true,
                width: 120,
                customHeaderCell: customCellStyle
            },
            {
                title: '项目经理',
                dataIndex: 'pmName',
                align: 'center',
                ellipsis: true,
                visible: true,
                width: 120,
                customHeaderCell: customOkCellStyle
            },
            {
                title: 'PMO',
                dataIndex: 'pmo',
                align: 'center',
                ellipsis: true,
                visible: true,
                width: 120,
                customHeaderCell: customOkCellStyle
            },
            {
                title: '问题类型',
                dataIndex: 'questionTypeFirst',
                align: 'center',
                ellipsis: true,

                width: 150
            },
            {
                title: '问题二级分类',
                dataIndex: 'questionTypeSecond',
                align: 'center',
                ellipsis: true,

                width: 120
            },
            {
                title: '解决方案',
                dataIndex: 'solution',
                align: 'center',
                ellipsis: true,

                width: 120
            },
            {
                title: 'FAQ',
                dataIndex: 'faqMilepost',
                align: 'center',
                ellipsis: true,

                width: 120
            },
            {
                title: '是否共性问题',
                dataIndex: 'commonProblems',
                align: 'center',
                ellipsis: true,

                width: 120
            },
            {
                title: '体系闭环',
                dataIndex: 'systemClosedLoop',
                resizable: true,
                align: 'center',
                ellipsis: true,

                width: 120
            },
            {
                title: '项目进展状态',
                dataIndex: 'projectProgressStatus',
                align: 'center',
                resizable: true,
                ellipsis: true,

                width: 160
            },

            {
                title: '转FAQ状态',
                dataIndex: 'zfaq',
                align: 'center',
                ellipsis: true,

                width: 150,
                customHeaderCell: customOkCellStyle
            },

            {
                title: '操作',
                dataIndex: 'opration',
                resizable: true,
                visible: true,
                align: 'center',
                fixed: 'right',
                width: 200
            }

            // 其他通用列
        ],
        oldColumns: []
    })
    const colorMap = {
        '解决中': '#3875FF',
        '未转化': '#9254DE',
        '未开始': '#BBBBBB',
        '已解决': '#52C41A',
        '进行中': '#3875ff',
        '处理中': '#3875ff',
        '已完成': '#52C41A',
        '延期': '#F5222D',
        '延期解决': '#FF7400',
        '无需解决': '#FFC900',
        '已关闭': '#898989',
        '已回访': '#3FA7FF',
        '待分发': '#FF7D27',
        '进行中': '#3875FF',
        '审批中': '#1890FF',
        '未启动': '#BBBBBB',
        '完成': '#52C41A',
        '延期完成': '#FA8C16',
        '测试中': '#A0D911',
        '延期': '#FA3D16',
        '提测': '#A0D911',
        '验收': '#9254DE'
    }
    function getTextColor(text) {
        return colorMap[text] || '#9dbaff'
    }
    function handleEdit(record) {
        record.editLoading = true
        put(`/solution-ppm/api/v2/built-in-system-ppm/meeting_question/modify_lock/${record.id} `)
            .then(async data => {
                if (data.code !== 200) {
                    message.error('有人正在操作')
                    return
                }
                record.isEdit = true
            })
            .finally(() => {
                record.editLoading = false
            })
    }

    function handleAddTable() {
        // let chooseData = state.projectList.find(item => item.value === useProjectId.value)
        let chooseData = state.dataSource.find(item => item.projectId === useProjectId.value)
        state.selectData.projectProgressQuestionList.unshift({
            meetingDate: dayjs().format('YYYY-MM-DD'),
            meetingSourceList: useFrom.value === 'END_TO_END' ? ['日例会'] : ['周例会'],
            areaCode: undefined,
            solution: undefined,
            projectId: undefined,
            projectDirector: chooseData?.projectDirector?.split(',')[0] || undefined,
            pmName: chooseData?.pmName || undefined,
            pmo: chooseData?.pmo || undefined,
            questionDescription: undefined,
            responsiblePersonList: undefined,
            endTime: undefined,
            completionStatusFeedback: undefined,
            questionTypeFirst: undefined,
            questionTypeSecond: undefined,
            faq: undefined,
            commonProblems: undefined,
            systemClosedLoop: undefined,
            solutionOrAction: undefined,
            projectType: '交付项目',
            finishStatus: '未启动',
            isNew: true,
            isEdit: true,
            questionSource: '进度表',
            productLineList: [lineMap[useFrom.value]]
        })
    }
    const lineMap = {
        'CEMENT_INGREDIENTS': '水泥配料',
        'END_TO_END': '端到端',
        'EDGE_MEASUREMENT': '数据治理'
    }
    // 暴露给父组件
    defineExpose({
        handleAddTable
    })
    const editData = ref({})
    function confirmLhwt(record) {
        editData.value = record

        finallyConfirmLhwt(record)
    }
    function finallyConfirmLhwt(record) {
        record.okBtnLoading = true
        const api = editData.value.isNew ? post : put
        api('/solution-ppm/api/v2/built-in-system-ppm/meeting_question', {
            ...editData.value,
            projectId: useProjectId.value,
            areaCode: state.selectData.areaCode
        })
            .then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                message.success(data.message)

                if (editData.value.isNew) {
                    // 新建数据的情况
                    const index = state.selectData.projectProgressQuestionList.findIndex(item => item === record)
                    if (index !== -1) {
                        // 用后端返回的数据替换临时数据
                        state.selectData.projectProgressQuestionList.splice(index, 1, {
                            ...data.data,
                            isEdit: false
                        })
                    }
                } else {
                    // 编辑现有数据的情况
                    Object.assign(record, data.data, { isEdit: false })
                }
            })
            .finally(() => {
                editData.value = {}
                record.okBtnLoading = false
            })
    }
    //     转化为工单
    import { QuillEditor, Quill } from '@vueup/vue-quill'
    import ImageUploader from 'quill-image-uploader'
    import '@vueup/vue-quill/dist/vue-quill.snow.css'
    const titleConfig = [
        { Choice: ' .ql-bold', title: '加粗' },
        { Choice: ' .ql-italic', title: '斜体' },
        { Choice: ' .ql-underline', title: '下划线' },
        { Choice: ' .ql-strike', title: '删除线' },
        { Choice: ' .ql-blockquote', title: '块引用' },
        { Choice: ' .ql-code-block', title: '插入代码' },
        { Choice: ' .ql-size', title: '字体大小' },
        { Choice: ' .ql-size', title: '字体大小' },
        { Choice: ' .ql-color', title: '字体颜色' },
        { Choice: ' .ql-background', title: '字体背景颜色' },
        { Choice: ' .ql-list[value="ordered"]', title: '有序列表' },
        { Choice: ' .ql-list[value="bullet"]', title: '无序列表' },
        { Choice: ' .ql-header[value="1"]', title: '1级标题' },
        { Choice: ' .ql-header[value="2"]', title: '2级标题' },
        { Choice: ' .ql-align', title: '对齐方式' },
        { Choice: ' .ql-clean', title: '清除字体格式' },
        { Choice: ' .ql-image', title: '图像' },
        { Choice: ' .ql-size .ql-picker-item[data-value="small"]', title: '小号' },
        { Choice: ' .ql-size .ql-picker-item[data-value="large"]', title: '大号' },
        { Choice: ' .ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
        { Choice: ' .ql-size .ql-picker-item:nth-child(2)', title: '标准' },
        { Choice: ' .ql-align .ql-picker-item:first-child', title: '居左对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
    ]
    // 注册图片上传模块
    Quill.register('modules/imageUploader', ImageUploader)

    // 将本地文件转换为URL
    const getLocalImageURL = file => {
        return new Promise(resolve => {
            const reader = new FileReader()
            reader.onload = e => {
                resolve(e.target.result)
            }
            reader.readAsDataURL(file)
        })
    }

    // 表单数据

    // Quill 编辑器选项
    const editorOption = ref({
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
                ['blockquote', 'code-block'], // 引用，代码块
                [{ header: 1 }, { header: 2 }], // 标题1，标题2
                [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
                [{ size: ['small', false, 'large', 'huge'] }], // 文字大小
                [{ color: [] }, { background: [] }], // 字体颜色，背景颜色
                [{ align: [] }], // 对齐
                ['clean'], // 清除格式
                ['image'] // 链接，图片，视频
            ]
            // ImageUploader: imageHandler
        }
    })

    // 将 dataURL 转换为 File 对象的辅助函数
    const dataURLtoFile = (dataurl, filename) => {
        const arr = dataurl.split(',')
        const mime = arr[0].match(/:(.*?);/)[1]
        const bstr = atob(arr[1])
        let n = bstr.length
        const u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], filename, { type: mime })
    }
    const gdState = reactive({
        visible: false,
        fatherLoading: false,
        modalForm: {
            content: undefined,
            type: '问题转化',
            priority: 'p2',
            questionSource: '问题转化',
            workHours: undefined,
            endTime: undefined,
            areaCode: undefined,
            projectId: undefined,
            version: undefined,
            customer: undefined,
            production: undefined,
            environment: undefined,
            description: undefined,
            monitorScene: undefined,
            solverList: [],
            descriptionAttachmentList: [],
            qillData: ''
        },
        projectList: [],
        wtlyList: [],
        customList: [],
        productList: [],
        areaList: [],
        environmentList: [],
        monitorSceneList: []
    })
    // 获取问题来源
    function getWtly() {
        get(' /solution-ppm-basic-data/api/v1/dictionary/search/GD.WTLY').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            gdState.wtlyList = data.data.map(item => {
                return {
                    label: item.itemName,
                    value: item.itemName
                }
            })
        })
    }
    const quillEditor = ref(null) // 引用QuillEditor组件
    const answerQuillEditor = ref(null) // 引用QuillEditor组件
    const currentData = ref({})
    async function showGd(record) {
        convertId.value = record.id
        await getGdAreaList()
        await getProjectList() // 获取项目列表
        await getEnvironmentList() // 获取环境列表
        await getCustomerList() // 获取客户列表
        await getProductList() // 获取产品列表
        gdState.visible = true
        nextTick(() => {
            initTitle()
            const data = cloneDeep(record)
            console.log(state.selectData)
            gdState.modalForm.areaCode = state.selectData.areaCode
            gdState.modalForm.content = state.selectData.questionDescription
            if (data.endTime) {
                gdState.modalForm.endTime = dayjs(data.endTime).format('YYYY-MM-DD HH:mm:ss')
            }
            gdState.modalForm.projectId = state.selectData.projectId
            quillEditor.value.setText(data.questionDescription + data.solutionOrAction)
        })
    }
    function initTitle() {
        document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''
        for (let item of titleConfig) {
            let tip = document.querySelector('.ql-toolbar' + item.Choice)
            if (!tip) continue
            tip.setAttribute('title', item.title)
        }
    }
    const gdFormRef = ref(null)
    // 上传API
    const uploadFileAPI = async file => {
        const data = new FormData()
        data.append('file', file)

        return post('/file-storage/api/v1/file/upload', data)
            .then(({ data: { fullUrl } }) => {
                return { data: { fullUrl } }
            })
            .catch(error => {
                console.error('上传图片出错:', error)
                throw error // 抛出错误以供外部处理
            })
    }
    const convertId = ref()
    //     父工单提交表单
    function submit() {
        gdFormRef.value.validate().then(async () => {
            gdState.fatherLoading = true
            const deltaContent = quillEditor.value.getContents()

            const imageUploadPromises = []

            deltaContent.ops.forEach(op => {
                if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
                    const localSrc = op.insert.image

                    // 如果是 base64 图片，上传并替换为 URL
                    const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

                    const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
                        // 替换 op 中的 base64 URL 为服务器返回的 URL
                        op.insert.image = fullUrl
                    })

                    imageUploadPromises.push(uploadPromise)
                }
            })
            try {
                await Promise.all(imageUploadPromises)
                // 新建保存逻辑
                const params = { ...gdState.modalForm }
                params.description = JSON.stringify(deltaContent)
                post(
                    `/solution-ppm/api/v2/built-in-system-ppm/meeting_question/transfer_to_work_order/${convertId.value}`,
                    params
                )
                    .then(data => {
                        if (data.code !== 200) {
                            message.error(data.message)
                            return
                        }
                        message.success(data.message)
                        gdState.visible = false
                        resetFather()
                        getDataSource().then(() => {
                            let data = state.dataSource.find(item => item.id === useId.value)
                            if (data) {
                                state.selectData = data
                                // getFactory(state.selectData.areaCode || 0)
                            }
                        })
                    })
                    .finally(() => {
                        gdState.fatherLoading = false
                    })
            } catch (error) {
                gdState.fatherLoading = false
                console.error('图片上传失败', error)
                return // 终止提交
            }
        })
    }
    function resetFather() {
        gdState.modalForm = {
            content: undefined,
            type: '问题转化',
            priority: 'p2',
            questionSource: '问题转化',
            workHours: undefined,
            endTime: undefined,
            areaCode: undefined,
            projectId: undefined,
            version: undefined,
            customer: undefined,
            production: undefined,
            environment: undefined,
            description: undefined,
            solverList: [],
            descriptionAttachmentList: [],
            qillData: ''
        }
    }
    function fatherCancel() {
        gdState.visible = false
        resetFather()
    }
    function hanldeTypeChange() {
        if (gdState.modalForm.type === '产品需求') {
            gdState.modalForm.priority = 'p3'
            getSolveTimeByType('p3')
        } else {
            gdState.modalForm.priority = gdState.modalForm.endTime = gdState.modalForm.workHours = undefined
        }
    }
    //     根据类型获取解决时间
    function getSolveTimeByType(type) {
        let num = 0
        if (type == 'p0') {
            num = 2
            gdState.modalForm.workHours = 2
        } else if (type == 'p1') {
            num = 24
            gdState.modalForm.workHours = 24
        } else if (type == 'p2') {
            num = 48
            gdState.modalForm.workHours = 48
        } else if (type == 'p3') {
            num = 48
            gdState.modalForm.workHours = 336
        }
        getSolveTime()
    }
    //     计算解决时间
    function getSolveTime() {
        return
        // 获取当前时间
        let currentDate = dayjs()
        let num = gdState.modalForm.workHours
        // 计算新时间
        let newDate = currentDate.add(num, 'hour')

        // 格式化新时间为 "YYYY-MM-DD HH:mm" 格式
        let formattedDate = newDate.format('YYYY-MM-DD HH:mm:ss')

        gdState.modalForm.endTime = formattedDate
    }
    // 区域变
    function gdAreaChange() {
        gdState.modalForm.customer =
            gdState.modalForm.projectId =
            gdState.modalForm.environment =
            gdState.modalForm.production =
            gdState.modalForm.version =
            gdState.modalForm.milepostId =
            gdState.modalForm.taskId =
                undefined
    }
    // 客户改变如果没有选区域自动带区域
    function customerChange() {
        let arae = gdState.customList.find(item => item.name === gdState.modalForm.customer)
        if (arae) {
            gdState.modalForm.areaCode = arae.areaCode
        }
        gdState.modalForm.environment = undefined
    }
    // 环境变
    function environmentChange() {
        gdState.modalForm.production = gdState.modalForm.version = undefined
    }
    // 项目变
    function projectChange() {
        gdState.modalForm.environment =
            gdState.modalForm.production =
            gdState.modalForm.version =
            gdState.modalForm.milepostId =
            gdState.modalForm.taskId =
                undefined
    }
    // 产品变
    function productChange() {
        gdState.modalForm.version = undefined
        getVersionList()
    }
    // 获取版本
    function getVersionList() {
        let envId = gdState.environmentList.find(item => item.name === gdState.modalForm.environment)?.id
        let productId = gdState.productList.find(item => item.name === gdState.modalForm.production)?.id
        get(
            `/solution-ppm-work-order/api/v1/work_order/version?envId=${envId ? envId : ''}&productId=${
                productId ? productId : ''
            }`
        ).then(data => {
            gdState.modalForm.version = data.data
        })
    }
    // 项目
    function getProjectList() {
        if (gdState.modalForm.areaCode) {
            get(`/solution-ppm-work-order/api/v1/work_order/project_by_area_code/${gdState.modalForm.areaCode}`).then(
                data => {
                    if (data.code !== 200) {
                        message.error(data.message)
                        return
                    }
                    gdState.projectList = data.data
                }
            )
        } else {
            get(`/solution-ppm-work-order/api/v1/work_order/project_by_area_code/0`).then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                gdState.projectList = data.data
            })
        }
    }
    function getFactory(record) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/meeting_question/get_project_by_area_code/${record}`).then(
            data => {
                state.projectList = data.data.map(item => {
                    return {
                        label: item.projectShortName,
                        value: item.projectId,
                        pmName: item.pmName,
                        projectDirector: item.projectDirector,
                        pmo: item.projectManagementOffice
                    }
                })
            }
        )
    }
    function getGdAreaList() {
        get('/solution-ppm-work-order/api/v1/work_order/area_info').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            gdState.areaList = data.data.map(item => {
                return {
                    label: item.areaName,
                    value: item.areaCode
                }
            })
        })
    }

    function getCustomerList() {
        get(
            `/solution-ppm-work-order/api/v1/work_order/customer?areaCode=${
                gdState.modalForm.areaCode ? gdState.modalForm.areaCode : ''
            }`
        ).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            gdState.customList = data.data
        })
    }
    // 获取监控场景list
    function getMonitorSceneList(flag) {
        const params = gdState.modalForm.type
        get(` /solution-ppm-basic-data/api/v1/dictionary/search/${params}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            gdState.monitorSceneList = data.data.map(item => {
                return {
                    label: item.itemName,
                    value: item.itemCode
                }
            })
        })
    }
    // 产品
    function getProductList() {
        let envId = gdState.environmentList.find(item => item.name === gdState.modalForm.environment)?.id
        get(`/solution-ppm-work-order/api/v1/work_order/product?envId=${envId ? envId : ''}`).then(data => {
            gdState.productList = data.data
        })
    }
    // 获取环境
    function getEnvironmentList() {
        let customerId = gdState.customList.find(item => item.name === gdState.modalForm.customer)?.id
        get(`/solution-ppm-work-order/api/v1/work_order/env?customerId=${customerId ? customerId : ''}`).then(data => {
            gdState.environmentList = data.data
        })
    }
    // 父上传文件
    function handlerFatherUpload(file) {
        gdState.fatherLoading = true
        const data = new FormData()
        data.append('file', file)

        post('/file-storage/api/v1/file/upload', data)
            .then(({ data: { fullUrl } }) => {
                if (data) {
                    // 新文件对象
                    const newFile = {
                        uid: file.uid,
                        lastModified: file.lastModified,
                        name: file.name,
                        size: file.size,
                        type: file.type,
                        status: 'done',
                        url: fullUrl
                    }

                    // 去重，保留一个副本
                    gdState.modalForm.descriptionAttachmentList = [
                        // 保留已存在文件（去除重复）
                        ...gdState.modalForm.descriptionAttachmentList.filter(
                            item => item.uid !== file.uid && item.name !== file.name
                        ),
                        // 添加新的文件
                        newFile
                    ]
                }
                gdState.fatherLoading = false
            })
            .catch(e => {
                message.error('上传失败' + e)
            })

        return false
    }
    // 父移除文件
    function handlerFatherRemove(file) {
        gdState.modalForm.descriptionAttachmentList = gdState.modalForm.descriptionAttachmentList.filter(
            item => item.uid !== file.uid
        )
    }
    // 父上传文件
    // 会议类型
    function getHyly() {
        get(' /solution-ppm-basic-data/api/v1/dictionary/search/LHWTKB.HYLY').then(data => {
            state.hylyList = data.data
        })
    }
    // 产品线
    function getProductLineList() {
        get('/solution-ppm-basic-data/api/v1/product_line/all').then(data => {
            state.productLineList = data.data.map(item => {
                return {
                    label: item.productLineName,
                    value: item.productLineName
                }
            })
        })
    }
    function confirmDeleteLhwt(record, id) {
        // if (!state.permission) {
        //     message.info('暂无权限')
        //     return
        // }
        if (record.isNew) {
            state.selectData.projectProgressQuestionList.shift()
        } else {
            del(`/solution-ppm/api/v2/built-in-system-ppm/meeting_question/${id}`).then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                message.success(data.message)
                getDataSource().then(() => {
                    let data = state.dataSource.find(item => item.id === useId.value)
                    if (data) {
                        state.selectData = data
                    }
                })
            })
        }
    }
    function handlerGetSpace(data) {
        return data?.split(/[;；]/)
    }
    const overStyle = ref({
        maxWidth: '500px',
        fontSize: '16px'
    })
    const handleResizeColumn = (w, col) => {
        const width = w - 50 // 确保宽度被计算并且减去额外空间

        // 根据列标题来确定不同的 div
        let div = null
        if (col.title === '解决方案及行动项') {
            div = document.querySelectorAll('.omit-div')
        } else if (col.title.includes('问题&风险描述')) {
            div = document.querySelectorAll('.omit-div-question')
        } else if (col.title === '项目进展状态') {
            div = document.querySelectorAll('.omit-div-status')
        }

        // 如果找到了对应的 div，更新其宽度
        if (div.length > 0) {
            div.forEach(item => {
                item.style.width = `${width}px`
            })
            overStyle.value.maxWidth = `${width}px` // 更新 tooltip 最大宽度
        }

        // 更新 columnState 中的列宽
        columnState.baseColumns = columnState.baseColumns.map(item => {
            if (item.dataIndex === col.dataIndex) {
                return { ...item, width: w } // 更新该列的宽度
            }
            return item
        })

        // 如果列有子列，确保子列也能根据父列的宽度进行更新
        if (col.children) {
            col.children.forEach(child => {
                columnState.baseColumns = columnState.baseColumns.map(item => {
                    if (item.dataIndex === child.dataIndex) {
                        return { ...item, width: w } // 更新子列的宽度
                    }
                    return item
                })
            })
        }
    }
    function jumpGd(record) {
        const isLocal = window.location.host.includes('localhost')
        if (isLocal) {
            window.open(
                `${import.meta.env.VITE_PUBLIC_PATH}/page/xingongdan?number=${record.workOrderNumber}`,
                '_blank'
            )
        } else {
            window.open(
                `${import.meta.env.VITE_PUBLIC_PATH}/allin-app/app_3000000079/page/3000001111?number=${
                    record.workOrderNumber
                }`,
                '_blank'
            )
        }
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    /*样式*/
    .page_root {
        background-color: #fff;
    }
    .body {
        background-color: #fff;
        height: 100%;
        padding-top: 16px;
    }
    .top-tab {
        height: 65px;
        padding: 16px 24px;
        background-color: #fff;
        margin-bottom: 16px;
        border-radius: 2px;
    }
    .kb-table-box {
        padding: 0 24px;
        padding-bottom: 24px;
        border-radius: 2px;
        background-color: #fff;
    }
    .kb-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 8px 4px;
        border-right: 1px solid #d9d9d9 !important;
        position: relative;
    }
    .kb-table-box :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 4px;
        word-break: break-all;
    }
    .gd-form-content :deep(.ant3-form-item-label) {
        width: 135px;
    }
    .gd-form-content :deep(.ant3-input-number),
    :deep(.ant3-picker) {
        width: 100%;
    }
    .gd-form-content :deep(.ql-snow .ql-editor) img {
        width: 200px;
    }
    .status-div {
        color: #fff;
        margin: 0 auto;
        border-radius: 4px;
        height: 25px;
        line-height: 25px;
    }
    .omit-div,
    .omit-div-question,
    .omit-div-productionPlan,
    .omit-div-customerRelationship {
        width: 320px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 100%;
        padding: 0 8px;
    }
    /*样式*/
</style>
